<template>
  <div v-loading="loading" class="basic-page">
    <!-- 头部标题 -->
    <div class='basic-header'>
      <span class='basic-header-title'>安全设置</span>
    </div>
    <!-- 主体内容 -->
    <div class="basic-body">
      <div class="basic-main-box">
        <div class="basic-main-box-title">基础信息</div>
        <div class="basic-main-content basic">
          <div class="edit-icon"  @click='handleDialogFormVisibleShow(wechatInfo)'></div>
          <div class="basic-info">
            <div class="qrcode">
              <img :src="getWxImg(wechatInfo.qrcodeImg)" alt="">
              <input
                class="upload-img"
                type="file"
                accept="image/*"
                @change="uploadQrcode">
              <div class="edit-text">更改</div>
            </div>
            <ul class="info">
              <li class="info-item">
                <p class="item-label">名称：</p>
                <p class="item-cont">{{wechatInfo.wechatName}}</p>
              </li>
              <li class="info-item">
                <p class="item-label">编号：</p>
                <p class="item-cont">{{wechatInfo.id}}</p>
              </li>
              <li class="info-item">
                <p class="item-label">微信：</p>
                <p class="item-cont">{{wechatInfo.wechatUid}}</p>
              </li>
              <li class="info-item">
                <p class="item-label">类型：</p>
                <p class="item-cont">{{wechatInfo.wechatType | handleWechatType}}</p>
              </li>
              <li class="info-item">
                <p class="item-label">粉丝：</p>
                <p class="item-cont">{{wechatInfo.fansCount || 0}}</p>
              </li>
            </ul>
          </div>
        </div>
        <!-- <div class="basic-main-box-title secord"> 设置图文安全</div>
        <div class="basic-main-content">
          <div class="edit-icon"
            v-show='!isEdit'
            @click='changeEditStatus'></div>
          <div class="basic-set-box-top">
            <el-form  label-width="100px" :model="config">
              <el-form-item label="安全控制：">
                <el-select v-model="viewType"  :disabled='!isEdit' placeholder="请选择">
                  <el-option
                    v-for="item in safeOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="控制效果：" >
                <div class="control-main-box">
                  <div class="control-item">
                    <el-switch v-model='config.forbidCopy' :disabled='!isEdit' ></el-switch>
                    <span class="control-item-t">正文禁止复制</span>
                    <el-tooltip class="item" effect="light"  placement="right">
                      <div slot="content">勾选此项后，微信客户端的图文同时<br/>将会：<br/><span class='tip'>隐藏“阅读统计”</span><br/><span class='tip'>隐藏“点赞”功能</span><br/><span class='tip'>正文图片无法点击“查看大图”</span></div>
                      <img style='margin-left: 4px' src="~assets/img/zhushix.png" alt="">
                    </el-tooltip>
                  </div>
                  <div class="control-item">
                    <el-switch v-model='config.hideShareButton' :disabled='!isEdit' ></el-switch>
                    <span class="control-item-t">隐藏右上角分享按钮</span>
                  </div>
                  <div class="control-item">
                    <el-switch v-model='config.mpClientVisit' :disabled='!isEdit' ></el-switch>
                    <span class="control-item-t">仅支持“微信客户端”访问</span>
                  </div>
                </div>
              </el-form-item>
              <el-form-item label="其他：" >
                <div class="control-main-box">
                  <div class="control-item">
                    <el-switch v-model='config.showReadNumber' :disabled='!isEdit || config.forbidCopy' ></el-switch>
                    <span class="control-item-t">展示阅读数</span>
                  </div>
                  <div class="control-item">
                    <el-switch v-model='config.showThumbUpNumber' :disabled='!isEdit || config.forbidCopy' ></el-switch>
                    <span class="control-item-t">展示点赞数</span>
                  </div>
                </div>
              </el-form-item>
            </el-form>
            <div class="btn-group">
              <div class="saveBtn" @click='saveSafeConfig' v-show='isEdit'>
                保存
              </div>
              <div class="cancelBtn" @click='isEdit=!isEdit' v-show='isEdit'>
                取消
              </div>
            </div>
          </div>
        </div> -->
        <!-- <div class="qrCode-box">
          <div class="qrCode-box-title">
            <span class="main-title">
              二维码
            </span>
            <span class="sub-title">
              点击可放大查看
            </span>
          </div>
          <div class="qrCode-wrap">
            <div class="qrCode">
              <img src="@/assets/img/company-wxqrcode.jpg" alt="">
            </div>
            <div class="submit-btn-wrap"  v-show='isEdit'>
              <div class='submit-btn' size='samll'>本地上传</div>
              <input class='submit-file' type="file"  name="" id="">
            </div>
          </div>
        </div>
        <div class="control-box">
          <div class="control-box-left">
            <div class="control-box-left-title">
              通讯录组织架构：同步至腾讯企业号平台
            </div>
            <div class="control-box-left-sub">
              启用后，通讯录的组织架构信息将会完全同步至腾讯企业号平台。
            </div>
          </div>
          <div class="control-box-right">
            <el-switch v-model='isSyncMail'></el-switch>
          </div>
        </div>
        <div class="control-box secord">
          <div class="control-box-left">
            <div class="control-box-left-title">
              通讯录组织架构：同步至腾讯企业号平台
            </div>
            <div class="control-box-left-sub">
              启用后，通讯录的组织架构信息将会完全同步至腾讯企业号平台。
            </div>
          </div>
          <div class="control-box-right">
            <el-switch v-model='isSyncMail'></el-switch>
          </div>
        </div>
        <div class="btn-group" v-show='isEdit'>
          <div class="saveBtn">
            保存
          </div>
          <div class="cancelBtn" @click='cancelEdit'>
            取消
          </div>
        </div> -->
        <div class="basic-main-box-title secord">设置群发审核</div>
        <div class="description">说明：群发审核，针对在通过平台向粉丝用户进行运营时，采取群发消息的方式时做的安全管理；需要通过审核人员（任一人）通过后，才可执行。</div>
        <div class="basic-main-content">
          <div class="edit-icon" v-show='!isExamEdit' @click='changeExamEditStatus'></div>
          <div class="basic-set-box-top">
            <el-form  label-width="100px" :model="examConfig">
              <!-- <el-form-item label="群发审核模式：">
                <el-select v-model="massAuditMode" :disabled='!isExamEdit' placeholder="请选择">
                  <el-option
                    v-for="item in examOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item> -->
              <el-form-item label="审核人员：" >
                <div class="exam-box-wrap">
                  <div class="exam-list">
                    <div class="exam-item" :class='{normal: !isExamEdit}' v-for='(val, key) in examMem' :key='key'>
                      {{val}} <span  v-show='isExamEdit' @click='delMemItem(key)' class="close-icon"></span>
                    </div>
                    <!-- <div class="exam-item">
                      王浩
                    </div>
                    <div class="exam-item">
                      刘晓燕
                    </div> -->
                  </div>
                  <div class="edit-btn btn" @click='setManMem' v-show='isExamEdit'>
                    选择
                  </div>
                </div>
              </el-form-item>
            </el-form>
            <div class="btn-group">
              <div class="saveBtn" @click='saveExamConfig' v-show='isExamEdit'>
                保存
              </div>
              <div class="cancelBtn" @click='isExamEdit=!isExamEdit' v-show='isExamEdit'>
                取消
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 编辑公众号-手动授权的公众号 -->
    <el-dialog
      class="edit-wechat-dialog"
      append-to-body
      width="600px"
      :title="mechatManage"
      :close-on-click-modal="false"
      :visible.sync="dialogFormVisible2">
      <div v-if="dioTextTwo === '下一步'">
        <el-form
          :model="subscriptionElse"
          :rules="rulesElse2"
          ref="subscription"
          label-width="120px"
          label-position="left"
          class="ruleForm">
          <div style="display: flex;justify-content: center;margin-bottom: 20px;">
            <div
              v-if="subscriptionElse.qrcodeImg" class="wechat-icon"
              :style="{backgroundImage: 'url(' + getWxImg(subscriptionElse.qrcodeImg)  + ')'}"></div>
            <div v-else class="wechat-icon"></div>
          </div>
          <div class="qrcode">
            <img :src="subscriptionElse.qrcodeImg" alt="">
          </div>
          <el-form-item
            label="公众号原始ID"
            prop="wechatUid">
            <el-input
              class="w240"
              :disabled="currentAuthorizationStatus === 1"
              placeholder="请输入公众号原始ID"
              v-model.trim="subscriptionElse.wechatUid">
            </el-input>
          </el-form-item>
          <el-form-item
            label="公众号名称"
            prop="wechatName">
            <div style="display: flex">
              <el-input
                class="w240"
                :disabled="currentAuthorizationStatus === 1"
                placeholder="请输入微信公众号名称"
                maxlength='32'
                v-model.trim="subscriptionElse.wechatName">
              </el-input>
              <!-- <div
                v-if="subscriptionElse.code"
                @click="removeWechat(0)"
                style="margin-left: 20px;color: #FA376C;font-size: 14px;cursor: pointer;">移除</div> -->
            </div>
          </el-form-item>
          <el-form-item
            label="公众号类型"
            prop="wechatType">
            <el-radio-group
              :disabled="mechatManage === '公众号管理'"
              v-model="subscriptionElse.wechatType">
              <el-radio label="2">服务号</el-radio>
              <el-radio label="1">订阅号</el-radio>
              <!-- <el-radio label="work">企业微信</el-radio> -->
            </el-radio-group>
          </el-form-item>
          <el-form-item
            label="公众号AppId"
            prop="appId">
            <el-input
              class="w400"
              :disabled="currentAuthorizationStatus === 1"
              placeholder="请输入公众号AppId"
              v-model.trim="subscriptionElse.appId">
            </el-input>
          </el-form-item>
          <el-form-item
            label="公众号Secret"
            prop="appSecret">
            <el-input
              class="w400"
              :disabled="currentAuthorizationStatus === 1"
              placeholder="请输入公众号Secret"
              v-model.trim="subscriptionElse.appSecret">
            </el-input>
          </el-form-item>
          <el-form-item
            label="公众号Token"
            prop="wechatToken">
            <el-input
              class="w400"
              :disabled="currentAuthorizationStatus === 1"
              placeholder="请输入公众号Token"
              v-model.trim="subscriptionElse.wechatToken">
            </el-input>
          </el-form-item>
          <el-form-item
            label="公众号AESKey"
            prop="encodingAesKey">
            <el-input
              class="w400"
              :disabled="currentAuthorizationStatus === 1"
              placeholder="请输入公众号AESKey"
              v-model.trim="subscriptionElse.encodingAesKey">
            </el-input>
          </el-form-item>
          <el-form-item
            label="公众号主体名称"
            prop="principalName">
            <el-input
              class="w400"
              :disabled="currentAuthorizationStatus === 1"
              placeholder="请输入公众号主体名称"
              v-model.trim="subscriptionElse.principalName">
            </el-input>
          </el-form-item>
          <div
            v-show="subscriptionElse.wechatType == 1"
            class='settingBox-header'>
            <span class='iconfont'>&#xe69e;</span> 提示：若想在订阅号中提升功能权限可选择服务号“订阅号+服务号”来提升能力！
          </div>
          <el-form-item
            v-show="subscriptionElse.wechatType == 1"
            label="功能升级号"
            class='article-authority'>
            <el-select
              v-model="subscriptionElse.expandAppid"
              placeholder="请选择"
              class='actionPermit-select'>
              <el-option v-for='item in serviceList'
                :key='item.appId'
                :label='item.wechatName'
                :value='item.appId'>
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <div v-else>
        <input id="copyTitle" class="hidden-input">
        <div>请按照以下步骤配置开发者信息(登录<a target="_blank" href="https://mp.weixin.qq.com">微信公众平台</a>)：</div>
        <div class="dio-wrapper">
          <div>1.设置IP白名单：</div>
          <div
            v-for="(item, index) of wechatDetail.ips"
            :key="item">
            <div class="wrapper-info">
              {{item}}
              <div v-if="index === 0" class="copy" @click="handleCopyTitle(wechatDetail.ips)">复制</div>
            </div>
          </div>
        </div>
        <div class="dio-wrapper">
          <div>2.填写服务器配置并开启：</div>
          <div style="margin:10px 0 0 12px">服务器地址(URL)</div>
          <div class="wrapper-info">{{wechatDetail.serverAddr}}
            <div v-if="wechatDetail.serverAddr" class="copy" @click="handleCopyTitle(wechatDetail.serverAddr)">复制</div>
          </div>
          <div style="margin-left: 12px">令牌（Token）</div>
          <div class="wrapper-info">{{subscriptionElse.wechatToken}}
            <div class="copy" @click="handleCopyTitle(subscriptionElse.wechatToken)">复制</div>
          </div>
          <div style="margin-left: 12px" v-show='subscriptionElse.encodingAesKey'>EncodingAESKey</div>
          <div class="wrapper-info" v-show='subscriptionElse.encodingAesKey'>{{subscriptionElse.encodingAesKey}}
            <div class="copy" @click="handleCopyTitle(subscriptionElse.encodingAesKey)">复制</div>
          </div>
          <!-- <div style="margin-left: 12px">消息加解密方式</div>
          <div class="wrapper-info">明文模式</div> -->
        </div>
        <!-- <div class="dio-wrapper">
          <div>3.配置安全域名：</div>
          <div class="wrapper-info" style="display: flex">
            <div>
              <el-upload
                class="upload-demo"
                ref="upload"
                style="display:inline-block;width:300px;flex: 1"
                :limit="limit = 1"
                action=""
                :on-exceed="handleOverUpLoad"
                accept=".txt"
                :http-request="uploadExl"
                :file-list="fileList">
                <span class="select-file">上传验证文件</span>
              </el-upload>
            </div>
          </div>
          <div style="margin-left: 12px">JS接口安全域名</div>
          <div class="wrapper-info">{{wechatDetail.domain}}
            <div v-if="wechatDetail.domain" class="copy" @click="handleCopyTitle(wechatDetail.domain)">复制</div>
          </div>
          <div style="margin-left: 12px">网页授权域名</div>
          <div class="wrapper-info">{{wechatDetail.domain}}
            <div v-if="wechatDetail.domain" class="copy" @click="handleCopyTitle(wechatDetail.domain)">复制</div>
          </div>
        </div> -->
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button
          size="small"
          type="primary"
          @click="handleFormElse()">{{dioTextTwo}}</el-button>
        <el-button
          size="small"
          @click="handleDialogFormVisible2()">{{dioTextOne}}</el-button>
        <TypeButton
          style="margin-left:40px;"
          v-show="currentAuthorizationStatus !== 1"
          type='delete'
          class='deleteBtn'
          size="small"
          @handleClick="deleteWechat(subscriptionElse.appId)"/>
        <el-button
          style="margin-left:40px;"
          size="small"
          type="info"
          v-show="currentAuthorizationStatus === 1"
          @click="removeWechat(subscriptionElse.id, subscriptionElse.appId)">解除授权</el-button>
      </div>
    </el-dialog>
    <!-- 编辑公众号-扫码授权的公众号 -->
    <el-dialog
      append-to-body
      width="600px"
      :title="mechatManage"
      :visible.sync="scanCodeVisible"
      :close-on-click-modal="false">
      <div v-if="dioTextTwo === '下一步'">
        <el-form
          :model="scanCodeForm"
          :rules="rulesElse1"
          label-width="120px"
          label-position="left"
          class="ruleForm">
          <div style="display: flex;justify-content: center;margin-bottom: 20px;">
            <div
              v-if="scanCodeForm.avatar"
              class="wechat-icon"
              :style="{backgroundImage: 'url(' + getWxImg(scanCodeForm.avatar)  + ')'}"></div>
            <div v-else class="wechat-icon"></div>
          </div>
          <el-form-item
            label="公众号原始ID"
            prop="wechatUid">
            <el-input
              disabled
              placeholder="请输入公众号原始ID"
              v-model.trim="scanCodeForm.wechatUid">
            </el-input>
          </el-form-item>
          <el-form-item
            label="公众号名称"
            prop="wechatName">
            <div style="display: flex">
              <el-input
                disabled
                placeholder="请输入公众号名称"
                maxlength="32"
                v-model.trim="scanCodeForm.wechatName">
              </el-input>
              <!-- <div
                v-if="scanCodeForm.code"
                @click="removeWechat(0)"
                style="margin-left: 20px;color: #FA376C;font-size: 14px;cursor: pointer;">移除</div> -->
            </div>
          </el-form-item>
          <el-form-item
            label="公众号类型"
            prop="wechatType">
            <el-radio-group
              disabled
              v-model="scanCodeForm.wechatType">
              <el-radio label="2">服务号</el-radio>
              <el-radio label="1">订阅号</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item
            label="公众号AppId"
            prop="appId">
            <el-input
              disabled
              placeholder="请输入公众号AppId"
              v-model.trim="scanCodeForm.appId">
            </el-input>
          </el-form-item>
          <el-form-item
            label="公众号主体名称"
            prop="principalName">
            <el-input
              disabled
              placeholder="请输入公众号主体名称"
              v-model.trim="scanCodeForm.principalName">
            </el-input>
          </el-form-item>
          <div
            v-show="scanCodeForm.wechatType == 1"
            class='settingBox-header'>
            <span class='iconfont'>&#xe69e;</span> 提示：若想在订阅号中提升功能权限可选择服务号“订阅号+服务号”来提升能力！
          </div>
          <el-form-item
            v-show="scanCodeForm.wechatType == 1"
            label="功能升级号"
            class='article-authority'>
            <el-select
              v-model="scanCodeForm.expandAppid"
              placeholder="请选择"
              class='actionPermit-select'>
              <el-option v-for='item in serviceList'
                :key='item.appId'
                :label='item.wechatName'
                :value='item.appId'>
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="saveScanCode()" size="small" type="primary">保存</el-button>
        <el-button @click="scanCodeVisible = false" size="small">取消</el-button>
      </div>
    </el-dialog>
    <select-mem v-if='setVisible' keyName='openid'  :selectedMembers='examMem' @confirm='confirmMem' @cancel='cancelMem'></select-mem>
  </div>
</template>

<script>
import SelectMem from '../components/selExamMem'
import TypeButton from '@/public/typeButton'
import qiniuUploader from 'assets/upload/upload.js'
export default {
  components: {
    SelectMem,
    TypeButton
  },
  data () {
    return {
      wechatDetail: {},
      dialogFormVisible2: false,
      wechatInfo: {
        id: '',
        wechatName: '',
        qrcodeImg: '',
        wechatUid: '',
        wechatType: '',
        fansCount: 0
      },
      rulesElse1: {
        wechatName: [{required: true, message: '必填', trigger: 'blur'}],
        wechatType: [{required: true, message: '必选', trigger: 'change'}],
        appId: [{ required: true, message: '必填', trigger: 'blur' }],
        wechatUid: {required: true, message: '必填', trigger: 'blur'}
      },
      rulesElse2: {
        wechatName: [{required: true, message: '必填', trigger: 'blur'}],
        wechatType: [{required: true, message: '必选', trigger: 'change'}],
        appId: [{ required: true, message: '必填', trigger: 'blur' }],
        appSecret: [{ required: true, message: '必填', trigger: 'blur' }],
        wechatToken: [{ required: true, message: '必填', trigger: 'blur' }],
        encodingAesKey: { max: 43, message: '长度不能超过43个字符', trigger: 'blur' },
        wechatUid: {required: true, message: '必填', trigger: 'blur'}
      },
      mechatManage: '设置公众号',
      scanCodeForm: {
        avatar: '',
        wechatName: null,
        wechatType: '1',
        appId: null,
        principalName: null,
        wechatUid: null,
        expandAppid: null
      },
      serviceList: [], // 服务号列表
      subscriptionElse: {
        module: 1,
        id: null,
        wechatName: null,
        authType: '1',
        appId: null,
        appSecret: null,
        applicationType: 1,
        wechatToken: null,
        encodingAesKey: null,
        wechatType: '1',
        principalName: null,
        wechatUid: null,
        expandAppid: null
      },
      examConfig: {
        mode: ''
      },
      examOptions: [
        {
          label: '默认模式',
          value: 0
        },
        {
          label: '离线审核/请求审核',
          value: 1
        },
        {
          label: '必须提交审核',
          value: 2
        }
      ],
      configInfo: {
      },
      examList: [],
      viewType: 0,
      massAuditMode: 0,
      config: {
        forbidCopy: false,
        hideShareButton: false,
        mpClientVisit: false,
        showReadNumber: false,
        showThumbUpNumber: false
      },
      safeOptions: [{
        label: '无线制，所有人都可以访问',
        value: 0
      }, {
        label: '仅已关注的人才能访问',
        value: 1
      }],
      isSyncMail: false,
      loading: false,
      selecValue: null,
      searchValue: null,
      isEdit: false,
      count: 0,
      page: 1,
      isExamEdit: false,
      setVisible: false,
      qrTitle: '',
      pageSize: 10,
      formData: {
        title: '',
        param: '',
        isAddTag: false
      },
      dioTextOne: '取 消',
      dioTextTwo: '下一步',
      currentAuthorizationStatus: null, // 未授权时表单可以修改，手动授权成功表单不可以修改
      dialogFormVisibleInit: false,
      mode: 'create',
      examMem: {},
      scanCodeVisible: false,
      // 规则列表
      rulesList: [
        {
          keywordType: 1,
          keyword: ''
        }
      ]
    }
  },
  methods: {
    // 复制链接
    handleCopyTitle (val) {
      let input = document.getElementById('copyTitle')
      input.value = val
      input.select()
      document.execCommand('Copy')
      this.$message({
        message: '复制成功',
        type: 'success'
      })
    },
    deleteWechat (appId) {
      if (appId) {
        this.$confirm('确认删除当前的公众号?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let url = `${this.SERVICE_WECHAT}/del/${appId}`
          this.post(url).then(res => {
            if (res.data.code === 200) {
              this.dialogFormVisible2 = false
              this.dioTextOne = '取 消'
              this.dioTextTwo = '下一步'
              sessionStorage.removeItem('currWechatData')
              sessionStorage.removeItem('wechatId')
              sessionStorage.removeItem('wechatName')
              sessionStorage.removeItem('authorizationStatus')
              sessionStorage.removeItem('wechatImg')
              this.fetchWechatList()
            }
          }).catch(e => {
            this.handleError(e)
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      }
    },
    // 获取当前账号下的公众号列表
    fetchWechatList () {
      let url = `${this.SERVICE_WECHAT}/account/list`
      this.get(url).then(res => {
        if (res.data.code === 200) {
          let data = res.data.data
          // sessionStorage.setItem('wechatList', JSON.stringify(data))
          if (data && data.length > 0) {
            // 通知服务器当前的 wechatId
            if (data[0]) {
              if (!sessionStorage.getItem('currWechatData')) {
                this.appId = sessionStorage.setItem('appid', data[0].appId)
                let currWechatData = JSON.stringify(data[0])
                sessionStorage.setItem('currWechatData', currWechatData)
                sessionStorage.setItem('wechatId', data[0].id)
                sessionStorage.setItem('appid', data[0].appId)
                sessionStorage.setItem('wechatName', data[0].wechatName)
                sessionStorage.setItem('authorizationStatus', data[0].authorizationStatus)
                sessionStorage.setItem('wechatImg', data[0].qrcodeImg)
              }
              window.location.reload()
            }
          } else {
            sessionStorage.removeItem('currWechatData')
            sessionStorage.removeItem('wechatId')
            sessionStorage.removeItem('wechatName')
            sessionStorage.removeItem('authorizationStatus')
            sessionStorage.removeItem('wechatImg')
            this.linkTo({name: 'platformList'})
          }
        }
      }).catch(e => {
        this.handleError(e)
      })
    },
    delMemItem (key) {
      delete this.examMem[key]
      this.examMem = Object.assign({}, this.examMem)
    },
    // 取消修改公众号重置信息
    handleDialogFormVisible2 () {
      if (this.dioTextOne === '取 消') {
        this.dialogFormVisible2 = false
      } else if (this.dioTextOne === '上一步') {
        if (this.wechatDetail.wxId) {
          this.mechatManage = '添加公众号'
        } else {
          this.mechatManage = '公众号管理'
        }
        this.dioTextOne = '取 消'
        this.dioTextTwo = '下一步'
      }
    },
    saveWechatConfig () {
      if (!this.wechatInfo.appId) {
        this.showWarning('请配置公众号')
        return
      }
      let url = `${this.SERVICE_WECHAT}/modify/${this.wechatInfo.appId}`
      let param = {
        qrcodeImg: this.wechatInfo.qrcodeImg,
        id: this.wechatInfo.id || '',
        wechatName: this.wechatInfo.wechatName || '',
        appId: this.wechatInfo.appId || '',
        principalName: this.wechatInfo.principalName || '',
        wechatUid: this.wechatInfo.wechatUid || '',
        expandAppid: this.wechatInfo.expandAppid || ''
      }
      this.posts(url, param).then(res => {
        if (res.data.code === 200) {
          this.showSucc('修改成功')
          this.fetchwechatDetail()
        }
      })
    },
    saveScanCode () {
      if (!this.scanCodeForm.appId) {
        this.$message({
          message: '请输入完整信息',
          type: 'warning'
        })
        return
      }
      let url = `${this.SERVICE_WECHAT}/modify/${this.scanCodeForm.appId}`
      let param = {
        id: this.scanCodeForm.id || '',
        wechatName: this.scanCodeForm.wechatName || '',
        appId: this.scanCodeForm.appId || '',
        principalName: this.scanCodeForm.principalName || '',
        wechatUid: this.scanCodeForm.wechatUid || '',
        expandAppid: this.scanCodeForm.expandAppid || ''
      }
      this.posts(url, param).then(res => {
        if (res.data.code === 200) {
          this.showSucc('修改成功')
          this.scanCodeVisible = false
        }
      }).catch(e => {
        this.handleError(e)
      })
    },
    // 保存修改公众号
    handleFormElse () {
      if (!sessionStorage.getItem('appid')) {
        return this.showWarning('请先绑定公众号')
      }
      if (this.dioTextTwo === '下一步') {
        if (!this.subscriptionElse.appId || !this.subscriptionElse.appSecret || !this.subscriptionElse.wechatToken || !this.subscriptionElse.wechatName || !this.subscriptionElse.wechatUid) {
          this.$message({
            message: '请输入完整信息',
            type: 'warning'
          })
          return
        }
        let url = `${this.SERVICE_WECHAT}/modify/${this.subscriptionElse.appId}`
        let param = {
          id: this.subscriptionElse.id || '',
          wechatName: this.subscriptionElse.wechatName || '',
          appId: this.subscriptionElse.appId || '',
          appSecret: this.subscriptionElse.appSecret || '',
          encodingAesKey: this.subscriptionElse.encodingAesKey || '',
          wechatToken: this.subscriptionElse.wechatToken || '',
          principalName: this.subscriptionElse.principalName || '',
          wechatUid: this.subscriptionElse.wechatUid || '',
          expandAppid: this.subscriptionElse.expandAppid || ''
        }
        this.posts(url, param).then(res => {
          if (res.data.code === 200) {
            // this.dialogFormVisible2 = false
            this.showSucc('修改成功')
            this.fetchwechatDetail()
            this.getWechatDetail()
            this.dioTextTwo = '确定'
          }
        }).catch(e => {
          this.handleError(e)
        })
        // }
      } else if (this.dioTextTwo === '确 定') {
        this.dialogFormVisible2 = false
        // this.fetchwechatDetail()
      }
    },
    handleDialogFormVisibleShow (data) {
      this.mechatManage = '公众号管理'
      switch (data.authType) {
        case 0:
        case 1:
          this.currentAuthorizationStatus = data.authorizationStatus
          this.dialogFormVisible2 = true
          this.dioTextOne = '取 消'
          this.dioTextTwo = '下一步'
          break
        case 2:
          this.scanCodeVisible = true
          break
      }
      // this.fetchServiceList()
      this.currWechatId = data.id
      this.currAppId = data.appId
      let url = `${this.SERVICE_WECHAT}/${this.currAppId}`
      this.get(url).then(res => {
        if (res.data.code === 200) {
          let data = res.data.data
          switch (data.authType) {
            case 0:
            case 1:
              this.subscriptionElse = data
              break
            case 2:
              this.scanCodeForm = data
              break
          }
        }
      })
    },
    // 获取公众号授权信息
    getWechatDetail () {
      let url = `${this.SERVICE_WECHAT}/authorization/${this.currAppId}?wechatId=${this.currWechatId}`
      this.get(url).then(res => {
        if (res.data.code === 200) {
          this.wechatDetail = res.data.data
          this.dioTextOne = '上一步'
          this.dioTextTwo = '确 定'
          this.mechatManage = '配置开发信息'
        }
      }).catch(e => {
        this.handleError(e)
      })
    },
    // 公众号信息
    fetchwechatDetail () {
      let appid = sessionStorage.getItem('appid')
      if (!appid) {
        return this.showWarning('请先绑定公众号')
      }
      let url = `${this.SERVICE_WECHAT}/${appid}`
      this.get(url).then(res => {
        if (res.data.code === 200) {
          let data = res.data.data
          if (data) {
            this.wechatInfo = data
          } else {
            this.wechatInfo = {
              id: '',
              wechatName: '',
              qrcodeImg: '',
              wechatUid: '',
              wechatType: '',
              fansCount: 0
            }
          }
        }
      }).catch(err => {
        this.handleError(err)
      })
    },
    // 更改公众号二维码
    uploadQrcode (e) {
      let file = e.target.files[0]
      if (file) {
        qiniuUploader.createQiniuUploader({
          file,
          completeCb: (res, conf) => {
            this.wechatInfo.qrcodeImg = `${conf.domain}/${res.key}`
            this.saveWechatConfig()
          }
        })
      }
    },
    getSafeConfig () {
      let appid = sessionStorage.getItem('appid')
      if (!appid) {
        return this.showWarning('请先绑定公众号')
      }
      let url = `${this.SERVICE_WECHAT}/${appid}/security`
      this.get(url).then(res => {
        if (res.data.code === 200) {
          let configInfo = res.data.data
          for (let prop in this.config) {
            this.config[prop] = configInfo.actionPermit && configInfo.actionPermit[prop]
          }
          let fans = configInfo.fans
          this.examMem = fans || {}
          this.viewType = configInfo.viewType
          this.massAuditMode = configInfo.massAuditMode
        }
      })
    },
    confirmMem (val, list) {
      this.examMem = val
      this.examList = list
      this.setVisible = false
    },
    cancelMem () {
      this.setVisible = false
    },
    setManMem () {
      this.setVisible = true
    },
    saveSafeConfig () {
      let appid = sessionStorage.getItem('appid')
      if (!appid) {
        return this.showWarning('请先绑定公众号')
      }
      let url = `${this.SERVICE_WECHAT}/${appid}/security`
      let param = {
        actionPermit: this.config,
        viewType: this.viewType
        // massAuditMode: this.massAuditMode
      }
      this.posts(url, param).then(res => {
        if (res.data.code === 200) {
          this.showSucc(res.data.message)
          this.isEdit = false
        }
      })
    },
    saveExamConfig () {
      let appid = sessionStorage.getItem('appid')
      if (!appid) {
        return this.showWarning('请先绑定公众号')
      }
      let url = `${this.SERVICE_WECHAT}/${appid}/security`
      let param = {
        // actionPermit: this.config,
        // viewType: this.viewType,
        massAuditMode: this.massAuditMode,
        auditFansIds: Object.keys(this.examMem)
      }
      this.posts(url, param).then(res => {
        if (res.data.code === 200) {
          this.showSucc(res.data.message)
          this.isExamEdit = false
        }
      })
    },
    changeEditStatus () {
      this.isEdit = !this.isEdit
    },
    changeExamEditStatus () {
      this.isExamEdit = !this.isExamEdit
    },
    cancelEdit () {
      this.isEdit = false
    }
  },
  filters: {
    handleWechatType (val) {
      switch (Number(val)) {
        case 1:
          return '订阅号'
        case 2:
          return '服务号'
        default:
          return ''
      }
    }
  },
  watch: {
    'config.forbidCopy': function (val) {
      if (val) {
        this.config.showReadNumber = false
        this.config.showThumbUpNumber = false
      }
    },
    'dialogFormVisible2': function (val) {
      if (!val) {
        this.fetchwechatDetail()
      }
    },
    'scanCodeVisible': function (val) {
      if (!val) {
        this.fetchwechatDetail()
      }
    }
  },
  created () {
    // 当平台没绑定公众号时，显示授权页
    if (!sessionStorage.getItem('appid')) {
      this.replaceRoute({name: 'platformAuth'})
      return
    }
    this.fetchwechatDetail()
    this.getSafeConfig()
  }
}
</script>

<style lang="stylus" scoped>
.edit-wechat-dialog
  >>> .el-dialog
    .w240
      width 240px
    .w400
      width 400px
      max-width 400px
      .el-input__inner
        max-width 400px
    .ruleForm
      position relative
      .qrcode
        width 89px
        height 89px
        background #ddd
        position absolute
        top 22px
        right 40px
        img
          width 100%
    .dio-wrapper
      margin-top 20px
      .wrapper-info
        between()
        margin 10px 0 10px 12px
        color #15C78A
        .copy
          width 65px
          text-align right
          color #FC713D
          cursor pointer
.tip
  margin-top 4px
  margin-left 6px
  position relative
  &:before
    content ''
    position absolute
    top 50%
    width 3px
    transform translateY(-50%)
    left -7px
    height 3px
    border-radius 50%
    background #FF923B
.edit-btn
  width 52px
  height 24px
  margin-top 5px
  background: #FFFFFF;
  border-radius: 4px;
  border: 1px solid #EAEDF7;
  font-size 12px
  text-align center
  color #22242F
  line-height 24px
.exam-box-wrap
  display flex
  align-items center
.exam-list
  display flex
  flex-wrap wrap
  align-items center
  .exam-item
    padding 7px 10px 7px 14px
    box-sizing border-box
    border 1px solid #4C84FF
    margin-right 10px
    margin-top 6px
    color #4C84FF
    font-size 12px
    line-height 12px
    border-radius 4px
    display inline-block
    &.normal
      padding 7px 14px
    .close-icon
      width 10px
      cursor pointer
      height 10px
      margin-left 6px
      display inline-block
      transform rotate(45deg)
      background url('~assets/img/ic_add_liucheng@2x.png') no-repeat center/10px 10px
.control-main-box
  display flex
  flex-direction column
  .control-item
    display flex
    align-items center
  .control-item-t
    font-size 14px
    color: #5E5E66;
    margin-left 10px
.btn-group
  display flex
  align-items center
.saveBtn
  width: 82px;
  height: 30px;
  line-height 30px
  text-align center
  cursor pointer
  background: #4C84FF;
  border-radius: 4px;
  margin-right 30px
  font-size 14px
  margin-left 100px
  color #fff
.cancelBtn
  width: 82px;
  height: 30px;
  border: 1px solid #E7E7E8
  line-height 30px
  text-align center
  cursor pointer
  background: #fff;
  border-radius: 4px;
  font-size 14px
  color #22242F
.submit-btn-wrap
  width 88px
  height 36px
  cursor pointer
  position relative
.submit-file
  position absolute
  width 100%
  height 100%
  z-index 100
  opacity 0
.submit-btn
  width 88px
  height 36px
  background #F6F6F9
  border-radius 4px
  border 1px solid #EAEDF7
  color #5E5E66
  cursor pointer
  font-size 14px
  line-height 36px
  text-align center
.qrCode-wrap
  display flex
  justify-content space-between
  align-items center
.form-info-item
  height 40px
.upload-btn-wrap
  display inline-block
  position relative
  width 30px
  height 14px
  cursor pointer
  margin-left 15px
.upload
  width 30px
  height 14px
  font-size 14px
  color #4C84FF
  // display inline-block
.control-box
  width 100%
  height 92px
  padding 23px 0 25px
  box-sizing border-box
  display flex
  align-items center
  border-top 1px solid #EAEDF7
  justify-content space-between
  border-bottom 1px solid #EAEDF7
  &.secord
    border-top none
  .control-box-left-title
    font-size 16px
    color #22242F
    font-weight 600
    margin-bottom 12px
  .control-box-left-sub
    font-size 12px
    color #5E5E66
.qrCode-box
  margin-top 28px
  margin-bottom 18px
  .qrCode-box-title
    margin-bottom 15px
    .main-title
      font-size 16px
      color #22242F
      font-weight 600
    .sub-title
      margin-left 15px
      color #888B9C
      font-size 14px
  .qrCode
    width 120px
    height 120px
    img
      width 100%
      height 100%
.showTitle
  font-size 12px
.logoImg
  width 80px
  height 80px
  border-radius 4px
.basic-main-box
  padding 10px 20px
  width 100%
  box-sizing border-box
  min-height calc(100vh - 170px)
  .basic-main-box-title
    font-size: 16px;
    color: #22242F;
    line-height: 18px;
    font-weight 600
    margin-bottom 14px
    margin-top 10px
    &.secord
      margin-top 20px
      margin-bottom 15px
    &.basic-main-item-title
      margin-top 40px
  .description
    font-size 12px
    color #5e5e66
    margin -3px 0 12px
  .basic-main-content
    width 100%
    padding 18px 48px 10px
    border-radius 8px
    box-sizing border-box
    position relative
    background-color rgba(239,240,246, 0.39)
    &.basic
      padded_box(border-box, 18px)
    // 基础信息
    .basic-info
      width 100%
      display flex
      .qrcode
        width 116px
        height 116px
        position relative
        &:hover
          .edit-text
            display block
        img
          width 100%
          height 100%
        .upload-img
          width 100%
          height 100%
          opacity 0
          position absolute
          top 0
          left 0
          z-index 2
        .edit-text
          width 100%
          height 100%
          background: linear-gradient(360deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%)
          line-height 30px
          text-align center
          font-size 14px
          color #fff
          padded_box(border-box, 86px 0 0)
          position absolute
          top 0
          left 0
          z-index 1
          display none
      .info
        width calc(100% - 146px)
        padded_box(border-box, 2px 0 0)
        margin-left 30px
        .info-item
          width 100%
          height 18px
          line-height 18px
          font-size 14px
          display flex
          align-items center
          margin-bottom 6px
          &:last-of-type
            margin-bottom 0
          .item-label
            color #5E5E66
          .item-cont
            flex 1
            color #22242F
            no-wrap()
            margin-left 10px
.edit-icon
  width 30px
  height 30px
  background url('~assets/img/ic_bianji_4@2x.png') no-repeat center/30px 30px
  position absolute
  top 20px
  z-index 100
  right 30px
  cursor pointer
.meterialBox
  >>> .cont-item
    display flex
    flex-direction column
.show-box
  width 471px
  height 36px
  padding 11px 15px
  box-sizing border-box
  display flex
  border-radius 4px
  align-items center
  color #5E5E66
  font-size 12px
  background-color rgb(248,249,251)
.input-item
  width 471px
  height 36px
  max-width 471px
  >>> .el-input__inner
    width 100%
    max-width 100%
    padding 11px 15px
    box-sizing border-box
.qrDialog
  >>> .el-dialog
    margin-top 10vh!important
  .qrDialog-main
    display flex
    padding 21px 47px 17px 30px
    box-sizing border-box
    .qrDialog-main-left
      display flex
      width 80px
      margin-right 31px
      flex-direction column
      img
        width 80px
        height 80px
      .download
        text-align center
        margin-top 4px
        color #4C84FF
        font-size 14px
  >>> .el-dialog__body
    padding 0
  >>> .el-dialog__header
    height 64px
    padding 24px 30px
    font-size 16px
    color #22242F
    box-sizing border-box
    border-bottom 1px solid #ECEDF2
  >>> .el-dialog__footer
    border-top 1px solid #ECEDF2
    height 60px
    padding 0
    display flex
    align-items center
    justify-content flex-end
.article-info
  display flex
  height 70px
  align-items center
  .article-info-cover
    height 60px
    width 60px
    margin-right 12px
    background-size cover
    background-repeat no-repeat
    background-position center
    border-radius 4px
  .article-info-title
    font-size 14px
    color #5E5E66
// .basic-page
//   >>> .el-button
//     padding 0
//     margin-right 40px
//   >>> .el-button--primary
//     width 150px
//     height 36px
//     line-height 0
//   >>> .el-input--medium
//     width 255px
//   .el-select >>> .el-input__inner
//     width 170px
.basic-page
  scroll()
  width 100%
  height 100%
  display flex
  flex-direction column
  background #fff
  // 头部
  .basic-header
    width 100%
    flex none
    padding-bottom: 20px;
    padding-top: 13px;
    font-weight 700
    font-size 14px
    background #fff
    .basic-header-title
      display inline-block
  // 主体内容
  .basic-body
    box-sizing border-box
    background #f2f2f6
    border-radius 6px
    padding 10px
    flex-shrink 1
    .basic-main-box
      background #fff
      border-radius 6px
      position relative
    .top
      between()
      width 100%
      background #fff
      padding 15px 20px
      border-radius 6px
      margin-bottom 10px
      box-sizing border-box
      overflow hidden
      .type_button
        margin-right 20px
      .select-input-box
        width 120px
        margin-right 10px
        >>> .el-input
          max-width 100%
          font-size 12px
          .el-input__inner
            max-width 100%
            height 30px
            padding-left 12px
            line-height 30px
            &::-webkit-input-placeholder
              font-size 12px
        >>> .el-select__caret
          line-height 30px
    .bottom
      center()
      width 100%
      padding-bottom 15px
      background #fff
      border-radius 0 0 6px 6px
    .middle
      max-height calc(100% - 127px)
      scroll()
      padding 15px 20px 0 20px
      box-sizing border-box
      background #fff
      border-radius 6px 6px 0 0
      .key-replay
        no-wrap()
.iconfont
  font-size 12px
  display inline-block
  cursor pointer
.iconfonts
  display inline-block
  color #3496FF
  cursor pointer
  &:hover
    color #FA376C
.iconfonts + .iconfonts
  margin-left 15px
// 抽屉
.demo-ruleForm
  padding-top 50px
  padding-left 90px
  .kys-wrapper
    margin-top 20px
    .key-word
      display inline-block
      >>> .el-input__inner
        width 130px
    .word-key
      display inline-block
      margin-left 10px
      >>> .el-input__inner
        width 216px
    &:first-child
      margin-top 0
    .iconfont
      display inline-block
      width 36px
      height 36px
      line-height 36px
      text-align center
      font-size 12px
      cursor pointer
</style>
